﻿
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<title>设置地图3D视角</title>
</head>
<body>
    <style>
    
         .BMap_bubble_top {
                   /* display: none; */
               }
        .BMap_bubble_pop{
            background-color: #333 !important; 
            border: none !important;
        }
        .BMap_bubble_pop img {
            /* display:none; */
            content: url("tail.png");
            top:147px !important; 
        }

        .BMap_bubble_center{
            top:-30px !important; 
            
        }
    </style>
	<div id="allmap" style="border-radius:35px"></div>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=vQ7aSF2KGzKcOkXkKDYtavT6gQKmG7lH"></script>
    <script type="text/javascript" src="map.js"></script>
<script>
    (function () {
        CefSharp.BindObjectAsync("csharp");
        var that = this;
        var map = new BMapGL.Map("allmap");
        var projectIcon = new BMapGL.Icon("point.png", new BMapGL.Size(26, 26));
        that._methods = {
            addMarker: function (point, data, icon,isOpenWindow) {
                var marker = new BMapGL.Marker(point, { icon: icon });
                map.addOverlay(marker);
                if(isOpenWindow)
                {
                    var text = "<div style='font-size:14px;color:#a3a3a3;padding:10px'><span style='color:#ffffff;font-size:16px;'>" + data.Name + "</span><br/><span style='margin-top:5px;'>总长："+data.Length+"</span><br/><span style='margin-top:5px;'>其他信息</span><br/><a href='javascript:void(0);' style='color:#ffffff;margin-top:5px' onclick='csharp.onToMain("+data.Id+");'>进入</a></div>";
                    var infoWindow = new BMapGL.InfoWindow(text);
                    map.openInfoWindow(infoWindow, point);
                }
                marker.addEventListener("click", function () {
                    var text = "<div style='font-size:14px;color:#a3a3a3;padding:10px'><span style='color:#ffffff;font-size:16px;'>" + data.Name + "</span><br/><span style='margin-top:5px;'>总长："+data.Length+"</span><br/><span style='margin-top:5px;'>其他信息</span><br/><a href='javascript:void(0);' style='color:#ffffff;margin-top:5px;' onclick='csharp.onToMain("+data.Id+");'>进入</a></div>";
                    var infoWindow = new BMapGL.InfoWindow(text);
                    map.openInfoWindow(infoWindow, point);
                });
            },
        };
        function initControls() {
            map.centerAndZoom(new BMapGL.Point(108.55, 34.32), 6);  // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true);   
            map.setMapType(BMAP_EARTH_MAP);  
            map.setZoom(5.6);// 设置缩放比例
            map.addEventListener('tilesloaded', function () {

                
                var ret = csharp.getDataList();
               
                ret.then((list)=>{
                    for(var i=0;i<list.length;i++)
                    {
                        var item = list[i];
                        that._methods.addMarker(new BMapGL.Point(item.Longitude, item.Latitude), item, projectIcon,item.IsOpenWindow);
                    }
                });
                
                datas.forEach(item => {
                    var hole = new BMapGL.Polygon(item, {
                        fillColor: '#F0F8FF',
                        fillOpacity: 0.7
                    });
                    map.addOverlay(hole);
                });
            });
        }
        initControls();
    })();
</script>
</body>
</html>

